<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="heard :: head"></head>

<body>
<nav th:replace="heard :: nav"></nav>
<div class="container-fluid" style="font-size: 14px;">

    <input id="pid" style="display:none" th:value="${pid}">
    <div id="toolbar">
        <a class="btn  btn-sm btn-outline-secondary " href="javascript:window.history.back()">返回</a>
        <button type="button" onclick="addPV()" class="btn  btn-sm btn-outline-secondary ">新建</button>
    </div>
    <table id="valueTable" class="table table-sm "></table>
</div>
</div>

</div>

</body>
<script>
    var pid = $("#pid").val();
    $(function () {
        initValueTable();
    })

    function initValueTable() {
        $.getJSON("/parameter/definition/" + pid, function (data) {
            const columns = [ {
                field: 'code',
                title: "code",
            }, {
                field: 'name',
                title: "name",
            },];
            $.each(data, function (i, item) {
                const obj = {};
                obj.field = item.name;
                obj.title = item.name;
                columns.push(obj);
            });
            columns.push({field: "opt", title: "opt", formatter: fmtOpt})
            console.log(columns);
            let $valueTable = $('#valueTable');
            $valueTable.bootstrapTable('destroy');
            $valueTable.bootstrapTable({
                url: "/parameter/value/page",
                method: 'GET',
                dataType: "json",//数据类型
                sidePagination: "server",
                pagination: true,
                columns: columns,
                pageNumber: 1,
                pageList: [5],
                sortable: true,
                cardVisible: true,
                cardView: true,
                toolbar: '#toolbar',
                search: true,
                showRefresh: true,
                showToggle: true,
                cellStyle: function (value, row, index) {
                    return {
                        css: {
                            "min-width": "10%",
                            "max-width": "10%",
                            /* "white-space": "nowrap",
                             "text-overflow": "ellipsis",
                             "overflow": "hidden",
                             "max-width": "200px"*/
                        }
                    }
                },
                queryParams: function (params) {
                    var temp = {
                        pageSize: params.limit,
                        pageNumber: (params.offset / params.limit) + 1,
                        pid: pid
                    };
                    return temp;
                },
                responseHandler: function (res) {
                    return {
                        "total": res.page,
                        "rows": res.data
                    }
                },
            })
        });

    }

    function fmtOpt(value, row, index) {
        let pvid = row.id;
        return '<a href="#" onclick="editPV(\'' + pvid + '\')" ><i class="fas fa-edit" onclick=""></i></a>&nbsp;&nbsp;' +
            '<a href="#" onclick="removePV(\'' + pvid + '\')"><i class="fa fa-times"></i></a>'
    }

    function addPV() {
        window.location.href = '/home/p/' + pid + '/v/edit';
    }

    function editPV(pvid) {
        window.location.href = '/home/p/' + pid + '/v/' + pvid + '/edit';
    }

    function removePV(pvid) {
        $.ajax({
            type: "delete",
            url: "/parameter/value/" + pvid,
            async: true,
            contentType: 'application/json',
            dataType: 'JSON',
            success: function (obj) {
                alert("删除成功");
                $('#valueTable').bootstrapTable('refresh')
            }
        });
    }
</script>
</html>
